<template>
  <div class="refine_dutycommand">
    <h2 class="titleblue">值班管理</h2>
    <div class="contant">
      <div class="plan-operate">
        <el-upload class="upload-demo dutyUpload" :action="$config.FILE_UPLOAD_URL" :data='uploadobj'
                   :on-preview="handlePreview" :on-remove="uploadRemove"
                   :before-upload="beforeUpload" :limit="12" accept='.xlsx,.xls,.xlw' multiple
                   :show-file-list="asdFalse" :on-success='uploadSuccess'
                   :on-exceed="handleExceed" :headers="headers">
          <el-button class="create fl">上传值班</el-button>
        </el-upload>
        <el-upload class="upload-demo dutyUpload" :action="$config.FILE_UPLOAD_URL" :data='uploadobj'
                   :show-file-list="asdFalse" :on-preview="handlePreview"
                   :on-remove="uploadRemove" :before-upload="beforeUpload1" :limit="12" accept='.xlsx,.xls,.xlw' multiple
                   :on-success='uploadSuccess'
                   :on-exceed="handleExceed" :headers="headers">
          <el-button class="create fl">上传白班</el-button>
        </el-upload>

      </div>

      <el-tabs v-model="activeName2" @tab-click="handleClick">
        <el-tab-pane label="值班表" name="0">
          <div class="main">
            <div class="orgbtn fl">
              <label class="create bgblue">值班</label>
              <em></em>
            </div>
            <div class="listItem">

              <ul>
                <li :class="index==level1?'activeli':''" v-for="(item,index) in sos" class="itemli">
                  <hr></hr>
                  <div class="itemson" @click='actived(index, "level1")'>
                    <em :class="index==level1?'el-icon-minus':'el-icon-plus'" style="cursor: pointer;"></em>
                    <span :class="index==level1?'active':''" style="cursor: pointer;">{{item.name}}</span>
                  </div>
                  <hr v-if="index==level1&&item.sub!=''" style="width:100px"></hr>
                  <div class="items" ref="ele">

                    <ul v-if='index==level1'>
                      <li v-for="(item1,index1) in item.sub" class="itemlison">
                        <hr></hr>
                        <div class="itemson" @click='actived(index1, "level2")'>
                          <em :class="index1==level2?'el-icon-minus':'el-icon-plus'" style="cursor: pointer;"></em>
                          <span id="ul1" style="cursor: pointer;"
                                :class="index1==level2?'active':''">{{item1.name}}</span>
                          <div class="filelist-div" v-if="index1==level2" v-for='file in item1.files'
                               style='font-size:12px;'><span style=" cursor: pointer;color:#298bf5;"
                                                             @click='detail(file.url)'>{{file.name}}</span> <i
                            v-if='username==file.id||aadmin' class="el-icon-circle-close" style='cursor: pointer;'
                            @click="deleteDuty(file.id)"></i></div>
                        </div>
                        <hr style="width:100px" v-if="index1==level2&&item1.sub&&item1.sub!=''"></hr>
                        <div class="items-cont" id="ul2">

                          <ul v-if='index1==level2'>
                            <li v-for='(item2,index2) in item1.sub'>
                              <div class="item-title" @click='actived(index2, "level3")'>
                                <hr></hr>
                                <em :class="index2==level3?'el-icon-minus':'el-icon-plus'"></em>
                                <span style="cursor: pointer;" :class="index2==level3?'active':''">{{item2.name}}</span>
                              </div>
                              <div class="filelist-div" v-if="index2==level3" v-for='file in item2.files'
                                   style='font-size:12px; margin-left:50px;'><span
                                style=" cursor: pointer;color:#298bf5;"
                                @click='detail(file.url)'>{{file.name}}</span> <i
                                v-if='username==file.id||aadmin' class="el-icon-circle-close"
                                style='cursor: pointer;' @click="deleteDuty(file.id)"></i></div>
                            </li>


                          </ul>
                        </div>
                      </li>


                    </ul>
                  </div>
                </li>

              </ul>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="白班表" name="1">
          <div class="main">
            <div class="orgbtn fl">
              <label class="create bgblue">白班</label>
              <em></em>
            </div>
            <div class="listItem">
              <ul>
                <li :class="index==level1?'activeli':''" v-for="(item,index) in sos" class="itemli">
                  <hr></hr>
                  <div class="itemson" @click='actived(index, "level1")'>
                    <em :class="index==level1?'el-icon-minus':'el-icon-plus'" style="cursor: pointer;"></em>
                    <span :class="index==level1?'active':''" style="cursor: pointer;">{{item.name}}</span>
                  </div>
                  <hr v-if="index==level1&&item.sub!=''" style="width:80px"></hr>
                  <div class="items" ref="ele">

                    <ul v-if='index==level1'>
                      <li v-for="(item1,index1) in item.sub" class="itemlison">
                        <hr></hr>
                        <div class="itemson" @click='actived(index1, "level2")'>
                          <em :class="index1==level2?'el-icon-minus':'el-icon-plus'" style="cursor: pointer;"></em>
                          <span id="ul1" style="cursor: pointer;"
                                :class="index1==level2?'active':''">{{item1.name}}</span>
                          <div class="filelist-div" v-if="index1==level2" v-for='file in item1.files'
                               style='font-size: 12px;'><span style=" cursor: pointer;color:#298bf5;"
                                                              @click='detail(file.url)'>{{file.name}}</span> <i
                            v-if='username==file.id||aadmin' class="el-icon-circle-close" style='cursor: pointer;'
                            @click="deleteDuty(file.id)"></i></div>
                        </div>
                        <hr style="width:80px" v-if="index1==level2&&item1.sub&&item1.sub!=''"></hr>
                        <div class="items-cont" id="ul2">

                          <ul v-if='index1==level2'>
                            <li v-for='(item2,index2) in item1.sub'>
                              <div class="item-title" @click='actived(index2, "level3")'>
                                <hr></hr>
                                <em :class="index2==level3?'el-icon-minus':'el-icon-plus'"></em>
                                <span style="cursor: pointer;" :class="index2==level3?'active':''">{{item2.name}}</span>
                              </div>
                              <div class="filelist-div" v-if="index2==level3" v-for='file in item2.files'
                                   style='font-size: 12px;margin-left:50px;'><span
                                style=" cursor: pointer;color:#298bf5;"
                                @click='detail(file.url)'>{{file.name}}</span> <i
                                v-if='username==file.id||aadmin' class="el-icon-circle-close"
                                style='cursor: pointer;' @click="deleteDuty(file.id)"></i></div>
                            </li>

                          </ul>
                        </div>
                      </li>


                    </ul>
                  </div>
                </li>

              </ul>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script src="./DutyCommand.js">

</script>

<style scoped lang="scss" src="./DutyCommand.scss"></style>

<style>
  .refine_dutycommand {
    width: 100%;
    display: inline-block
  }

  .refine_dutycommand .contant {
    margin-top: 20px;
    padding: 0 30px;
    box-sizing: border-box
  }

  .refine_dutycommand .create {
    width: 99px
  }

  .refine_dutycommand .plan-operate {
    width: 100%;
    display: inline-block
  }

  .refine_dutycommand .sel-div {
    float: right;
    margin-right: 10px
  }

  .refine_dutycommand .sel-label {
    margin-left: 10px
  }

  .refine_dutycommand .planselect {
    float: right;
    margin-right: 10px
  }

  .refine_dutycommand .planselect input {
    width: 122px;
    border-radius: 4px;
    border: 1px solid #ddd
  }

  .refine_dutycommand .plansearch {
    float: right;
    width: 270px
  }

  .refine_dutycommand .plansearch input {
    width: 200px;
    margin-right: 10px;
    border-radius: 0
  }

  .refine_dutycommand .plansearch .el-input-group__append {
    border-left: 1px;
    width: 56px;
    background-color: #0062cd;
    border-radius: 2px;
    font-size: 14px;
    color: #fff;
    padding: 0;
    box-sizing: border-box;
    text-align: center
  }

  .refine_dutycommand .el-date-editor {
    box-sizing: border-box;
    width: 180px
  }

  .refine_dutycommand .el-date-editor input {
    border-radius: 2px;
    border: 1px solid #ddd
  }

  .refine_dutycommand .el-tabs {
    margin-top: 30px
  }

  .refine_dutycommand .number {
    float: left;
    font-size: 12px
  }

  .refine_dutycommand .el-checkbox {
    margin-right: 10px !important;
    margin-left: 0 !important
  }

  .refine_dutycommand .cell, .refine_dutycommand .el-table th > .cell {
    padding-left: 0;
    padding-right: 0
  }

  .refine_dutycommand .el-checkbox__label {
    padding-left: 5px
  }

  .refine_dutycommand .el-input--suffix .el-input__inner {
    padding-right: 10px
  }

  .refine_dutycommand .el-checkbox-group {
    border: 0
  }

  .refine_dutycommand .el-table tr:nth-child(2n) {
    background: #fafafa
  }

  .refine_dutycommand .dutyUpload {
    width: 100px;
    height: 40px;
    float: left;
    margin-right: 10px
  }

  .refine_dutycommand .dutyUpload .el-upload--text {
    width: 100%;
    height: 40px;
    float: left;
    border: none
  }

  .refine_dutycommand .main {
    width: 100%;
    display: inline-block;
    position: relative;
    margin-top: 50px;
    padding-left: 0;
    box-sizing: border-box;
    height: 650px
  }

  .refine_dutycommand .orgbtn {
    position: absolute;
    left: 0;
    margin-top: 35px
  }

  .refine_dutycommand .orgbtn em {
    height: 1px;
    width: 30px;
    background: #aaa;
    margin-top: 19px;
    float: left;
    margin-left: -10px
  }

  .refine_dutycommand .orgbtn .bgblue {
    background: #298bf5
  }

  .refine_dutycommand .listItem {
    margin-left: 130px;
    position: relative
  }

  .refine_dutycommand .listItem ul {
    border-left: 1px solid #aaa
  }

  .refine_dutycommand .activeli {
    position: relative;
    z-index: 99
  }

  .refine_dutycommand .listItem li em {
    padding: 0;
    font-size: 12px;
    margin-right: 10px;
    border: 1px solid #aaa;
    color: #333;
    float: left;
    margin-top: 6px
  }

  .refine_dutycommand .listItem li {
    margin-bottom: 10px
  }

  .refine_dutycommand .listItem li:first-child {
    transform: translateY(-50%) !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    z-index: 100
  }

  .refine_dutycommand .listItem li:last-child {
    transform: translateY(46%);
    margin-top: -10px
  }

  .refine_dutycommand .listItem li:after {
    content: "";
    display: block;
    clear: both
  }

  .refine_dutycommand .listItem li hr {
    width: 30px;
    transform: translateY(-150%);
    margin-left: -1px;
    margin-top: 15px;
    float: left
  }

  .refine_dutycommand .listItem li span {
    float: left
  }

  .refine_dutycommand .listItem li .active {
    color: #298bf5
  }

  .refine_dutycommand .listItem li.active em {
    color: #ccc
  }

  .refine_dutycommand .itemlison:last-child {
    transform: translateY(0) !important;
    margin-top: 0 !important;
    height: 11px
  }

  .refine_dutycommand .itemson span {
    position: relative
  }

  .refine_dutycommand .itemson {
    float: left
  }

  .refine_dutycommand .items:after {
    content: "";
    display: block;
    clear: both
  }

  .refine_dutycommand .items {
    position: absolute;
    float: left;
    margin-top: 6px;
    left: 188px;
    top: -15px;
    background: #fff;
    z-index: 99;
    padding-top: 10px
  }

  .refine_dutycommand .items li {
    position: relative
  }

  .refine_dutycommand .items li:first-child {
    transform: translateY(0) !important;
    top: -14px
  }

  .refine_dutycommand .items-cont {
    position: absolute;
    left: 200px;
    top: 0;
    background: #fff;
    width: 300px;
    margin-left: -2px
  }

  .refine_dutycommand .items-cont li {
    position: relative;
    z-index: 999
  }

  .refine_dutycommand .items-cont li:first-child {
    transform: translateY(0) !important;
    margin-bottom: 0 !important;
    top: -14px !important;
    position: relative;
    width: 300px
  }

  .refine_dutycommand .items-cont .margin50 {
    transform: translateY(85%) !important;
    margin-top: -50px !important
  }

  .refine_dutycommand .items-cont .margin25:last-child {
    transform: translateY(50%);
    margin-top: -40px
  }

  .refine_dutycommand .item-phone {
    position: relative;
    left: 55px
  }

  .refine_dutycommand .el-icon-phone-outline {
    margin-right: 5px
  }

  .refine_dutycommand .item-title {
    width: 100%;
    float: left
  }

  .refine_dutycommand .el-tabs .is-active:after {
    border-color: #fff
  }

  .refine_dutycommand .filelist-div {
    display: block;
    width: 100%;
    float: left
  }
</style>
